<template>
	<Modal
			v-model:visible = 'visible'
			@cancel 		= 'close'
			:width 			= 'w'
			:height 		= 'h'
			:destroyOnClose = 'destroy'
			:wrapClassName 	= "
				'jzer-modal-wrap ' + (full ? 'jzer-modal-full' : '') + 
				(scroll ? ' jzer-modal-scroll':'') + ( loading ? ' jzer-modal-scroll-hidden': '' ) + 
				( mode ? ' jzer-modal-mode-' + mode : '' )
			"
			:cancelText 	= 'cancelText'
			:okText 		= 'okText'
			:maskClosable 	= 'false'
			:forceRender 	= 'false'
			:bodyStyle 		= "{padding:'10px', maxHeight, ...bodyStyle}"
			:footer 		= 'hasFooter'
		>
		<slot></slot>
		<template #title>
			<div class='f13' :class="[ center ? 'fxmc' : 'fxm' ]">
				<b class='f15'>{{title}}</b>
				<span v-if='subTitle' class='f13 c0 ml5'>( {{subTitle}} )</span>
				<slot name='title-after'></slot>
				<slot name='title-right'></slot>
			</div>
		</template>
		<template #footer>
			<Controls :align='btnAlign' :size='btnSize' :loading='loading' :disabled='disabled' :config='{ controls:btnData }' />
		</template>
		<Loading :loading='loading' :style="{ position: scroll ? 'fixed' : 'absoulte' }" />
	</Modal>
</template>

<script setup>
	import { Modal } from 'ant-design-vue'
	import { watch, onMounted } from 'vue'
	/* --------------------------- Component --------------------------- */
	const Button = $.lazy(()=>import('@antd/button.vue'))
	const Loading = $.lazy(()=>import('@antd/loading.vue'))
	const Controls 		= $.lazy(()=>import('#cpt/temp/Controls.vue'))
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		title 		: { type:String, default: '标题' },
		subTitle 	: String,
		full 		: { type:Boolean, default: false },
		width 		: { type:String, default: '600px'},
		height 		: { type:String, default: 'auto'},
		cancelText 	: { type:String, default: '取消' },
		okText 		: { type:String, default: '确定' },
		btnAlign 	: { type:String, default: 'center' },
		btnSize 	: { type:String, default: 'middle' },
		loading 	: Boolean,
		disabled	: Boolean,
		bodyStyle	: Object,
		center 		: { type:Boolean, default: true }, 
		controls  	: { type:[ Object, Array, Boolean, Function ], default: {} },
		scroll 		: { type:Boolean, default:true },
		destroy 	: { type:Boolean, default: true },
		mode 		: { type:Number, default: 0},
		id 			: String
	})
	let  { width, height, full, disabled, controls, cancelText, okText, title } = props
	/* --------------------------- ref --------------------------- */
	let visible = $ref()
	let w = $ref(full ? '100%' : width)
	let h = $ref(full ? '100%' : height)
	
	const c = controls !== false ? 45 : 0
	const t = title ? 40 : 0
	
	const maxHeight = props.scroll ? (document.body.clientHeight - c - t) + 'px' : '100%' 
	/* --------------------------- emit --------------------------- */
	const emit = defineEmits(['close', 'ok', 'init'])
	
	const close = () =>{
		visible = false
		emit('close')
	}
	/* --------------------------- controls --------------------------- */
	let btnData = $ref( [] )
	let hasFooter = $ref( )
	const setControls = controls => {
		controls = $fn.getResult(controls,{ close })
		if( $fn.hasArray( controls ) ){
			btnData = controls
		}else if( $fn.isObject( controls ) ){
			const { ok, cancel, before=[], after=[] } = controls
			btnData = [
				...before,
				{label:'取消', type:'default',click:()=>{
					const bool = controls?.onCancel?.(close)
					if( bool !== false ){
						close()
					}
				},  ...cancel },
				{label:'确定', click:()=>{
					emit('ok', close, value => {
						if( value !== false){
							close()
						}
					})
				}, ...ok },
				...after,
			]
		}else{
			hasFooter = controls
		}
	}
	
	setControls(controls)
	
	watch(()=>props.controls, value=>setControls(value))
	//
	watch(()=>props.width, value=> w = value)
	watch(()=>props.height, value=> h = value)
	/* ---------------------------  --------------------------- */
	const f = {
		open : () => visible = true,
		close
	}
	
	onMounted(()=>{
		emit('init',{ f })
	})
	/* --------------------------- 通信 --------------------------- */
	defineExpose(f)
</script>